<template>
  <div class="commenList">
    <div class="tit">
      我的买买买计划
      <span>買い物を買う</span>
    </div>
    <div class="mui-card" @click="goInfo">
				<div class="mui-card-header mui-card-media">
					<img src="../../assets/images/1.png">
					<div class="mui-media-body fl">
						番茄设计酱 <span>普通会员</span>
						<div class="star">
							<div class="grey">
								<img src="../../assets/images/star1.png" alt="">
								<img src="../../assets/images/star1.png" alt="">
								<img src="../../assets/images/star1.png" alt="">
								<img src="../../assets/images/star1.png" alt="">
								<img src="../../assets/images/star1.png" alt="">
							</div>
							<div class="mgh">
								<img v-for="(item,index) in star" :key="index" src="../../assets/images/star2.png" alt="">
							</div>
						</div>
					</div>
					<p class="fr time"> 2016-06-30</p>
				</div>
				<div class="mui-card-content" style="padding:0 15px; margin-top:-10px;">
					<div class="mui-card-content-inner" style="padding:0;">
						<p style="padding:0 10px;font-size: 12px;color: #666;">
							店铺服务很好不错哦，出了点小问题，平台客服很快就帮助解决啦。
						</p>
					</div>
				</div>
				<div class="mui-card-content pic" style="padding:0 20px 20px;">
					<div>
						<img src="../../assets/images/ava.png" alt="">
						
					</div>
					<div>
						<img src="../../assets/images/ava.png" alt="">
						
					</div>
					<div>
						<img src="../../assets/images/ava.png" alt="">
						
					</div>
				</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-header mui-card-media">
				<img src="../../assets/images/1.png">
				<div class="mui-media-body fl">
					番茄设计酱 <span>普通会员</span>
					<div class="star">
						<div class="grey">
							<img src="../../assets/images/star1.png" alt="">
							<img src="../../assets/images/star1.png" alt="">
							<img src="../../assets/images/star1.png" alt="">
							<img src="../../assets/images/star1.png" alt="">
							<img src="../../assets/images/star1.png" alt="">
						</div>
						<div class="mgh">
							<img v-for="(item,index) in star" :key="index" src="../../assets/images/star2.png" alt="">
						</div>
					</div>
				</div>
				<p class="fr time"> 2016-06-30</p>
			</div>
			<div class="mui-card-content" style="padding:0 15px; margin-top:-10px;">
				<div class="mui-card-content-inner" style="padding:0;">
					<p style="padding:0 10px;font-size: 12px;color: #666;">
						店铺服务很好不错哦，出了点小问题，平台客服很快就帮助解决啦。
					</p>
				</div>
			</div>
			<div class="mui-card-content pic" style="padding:0 20px 20px;">
				<div>
					<img src="../../assets/images/ava.png" alt="">
					
				</div>
				<div>
					<img src="../../assets/images/ava.png" alt="">
					
				</div>
				<div>
					<img src="../../assets/images/ava.png" alt="">
					
				</div>
			</div>
		</div>
		<tabBar></tabBar>	
  </div>
</template>

<script>
import tabBar from "@/components/tabbarshop/tabbar.vue"
export default {

  data () {
    return {
			star:3
    }
  },

  methods: {
		goInfo(){
			this.$router.push({name:'info', params: { inId: 1 }})
		}
	},

  created () {
	},
	
	components:{
		tabBar
	}
}
</script>

<style lang='less'>
.commenList{
	padding-bottom: 62px;
}
.mui-card{
	margin: 0;
	margin-bottom: 10px;
	box-shadow: none;
	border-radius:10px;
	border: 1px solid #E7E7E7;
	.time{
		font-size: 12px;
		color: #999999;	
	}
	.star{
		position: relative;
		img{
				width:12px;
				height:12px;
				display: block;
				float: left;
				margin-right: 2px;
		}
		.grey{
			margin-top: 2px;
			
		}
		.mgh{
			position: absolute;
			z-index: 2;
			top:0;
			left:0;
		}
	}
	.mui-media-body{
		span{
			font-size: 9px;
			display: inline-block;
			background: #003A9B;
			border-radius: 3px;
			width:41px;
			height:15px;
			line-height: 15px;
			text-align: center;
			color: #FBDA83 ;
			margin-left: 3px;
		}
	}
	.pic{
		overflow: hidden;
		div{
			margin-bottom: 5px;
			width:70px;
			height:70px;
			background: #F9F9FB;
			border-radius: 10px;
			overflow: hidden;
			float: left;
			margin-right: 10px;
			img{
				max-width:70%;
				height: 50px;
				margin:10px auto;
				display: block;
			}
		}
	}
}
.mui-card-header.mui-card-media{
	padding:20px;
	overflow: hidden;
}
.mui-card-header > img:first-child{
	border-radius:50%;
}
.mui-card-header:after, .mui-card-footer:before{
	height:0;
}
.mui-card-header.mui-card-media .mui-media-body{
	font-size: 12px;
	color: #333333;
	margin-left: 7px;
}
</style>
